<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Serial Port Info</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        h2 {
            color: #333;
            text-align: left;
        }

        button {
            margin: 5px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
    <style>
        .container {
            display: flex; /* 使用 Flexbox 布局 */
        }

        .main1 {
            flex: 1; /* 均分容器的宽度 */
            width: 50%;
            padding: 5px;
            background-color: #fff;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

        .main3 {
            width: 100%;
            height: 100%;
            margin-top: 10px;
            padding: 5px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
        }

        .main5 {
            margin: 10px;
            padding: 5px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
        }
        .main6 {
            height: 100%;
            margin: 10px;
            padding: 5px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
        }
    </style>

    <script>
        //打开端口
        function openPort() {
            var selectedPort = document.getElementById("commandSelect").value;
            if (!selectedPort) {
                document.getElementById("noPortNameResponse").innerHTML = "<p>请选择端口</p>"
                return;
            }
            fetch('http://localhost:8122/api/ATCommands/getPortName', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'portName=' + encodeURIComponent(selectedPort)
            }).then(
                document.getElementById("portNameResponse").innerHTML = "<p>打开端成功</p>"
            )
                .catch(error => console.error("Error:", error));
        }

        //进入临时模式
        function getTemporaryMode() {
            fetch('http://localhost:8122/api/ATCommands/getTemporaryMode', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                }
            }).then(
                document.getElementById("temporaryResponses").innerHTML = "<p>进入临时模式</p>"
            )
                .catch(error => console.error("Error:", error));
        }

        //关闭端口
        function closePort() {
            fetch('http://localhost:8122/api/ATCommands/closePort', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                }
            }).then(
                document.getElementById("closeResponse").innerHTML = "<p>关闭成功</p>"
            )
                .catch(error => console.error("Error:", error));
        }

        //按钮选择器
        document.addEventListener('DOMContentLoaded', function () {
            // 获取所有类名为 'commandSend' 的按钮
            var buttons = document.querySelectorAll('.commandSendA');

            // 为每个按钮添加点击事件处理器
            buttons.forEach(function (button) {
                button.addEventListener('click', function () {
                    sendAllCommandOfOnce(this.value);
                });
            });
        });

        //发送其中一条命令
        function sendAllCommandOfOnce(command) {
            console.log("command===" + command)
            if (!command) {
                document.getElementById("responseSection").innerHTML = "<p>请选择一个命令再发送！</p>";
                return;
            }

            // 发送fetch请求到后端API
            fetch(`http://localhost:8122/api/ATCommands/getAllCommandOfOnce`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'command=' + encodeURIComponent(command)
            })
                .then(response => response.json())  // 假设服务器返回JSON数据
                .then(data => {
                    // 可以在这里处理来自服务器的响应数据
                    console.log('Response from server:', data);
                    document.getElementById("responseSection").innerHTML = `<p>服务器响应: ${data.message}</p>`;
                })
                .catch(error => {
                    console.error('Error:', error);
                    document.getElementById("responseSection").innerHTML = "<p>内容！</p>";
                });
        }

        //一键获取
        function getAll() {
            fetch('http://localhost:8122/api/ATCommands/sendRecord', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                }
            }).then(
                document.getElementById("allResponse").innerHTML = "<p>获取成功，已写入Excal表格，请前往查看！！</p>"
            )
                .catch(error => console.error("Error:", error));
        }

    </script>
</head>
<body>

<div>
    <div class="container">
        <div class="main1">
            <div class="main5">
                <h2>端口配置</h2>
                <select id="commandSelect" style="width: 80px; height: 40px; ">
                    <option value="">端口号</option>
                    <option value="COM1">COM1</option>
                    <option value="COM2">COM2</option>
                    <option value="COM3">COM3</option>
                    <option value="COM3">COM4</option>
                    <option value="COM3">COM5</option>
                </select>
                <button onclick="openPort()">打开端口</button>
                <button onclick="closePort()">关闭端口</button>
                <button id="temporaryMode" onclick="getTemporaryMode()">+++a</button>
            </div>

            <div class="main5">
                <h2>快捷指令</h2>
                <button id="commandSendAll" onclick="getAll()">一键获取</button>
                <button class="commandSendA" onclick="sendAllCommandOfOnce()" value="AT+DIVSERVE">DIVSERVE</button>
                <button class="commandSendA" onclick="sendAllCommandOfOnce()" value="AT+VER">AT+VER</button>
                <button class="commandSendA" onclick="sendAllCommandOfOnce()" value="AT+ICCID">AT+ICCID</button>
                <button class="commandSendA" onclick="sendAllCommandOfOnce()" value="AT+SN">AT+SN</button>
                <button class="commandSendA" onclick="sendAllCommandOfOnce()" value="AT+IMEI">AT+IMEI</button>
            </div>
        </div>
        <div class="main1">
            <div >
                <h2>响应结果</h2>
                <p id="noPortNameResponse"></p>
                <p id="portNameResponse"></p>
                <p id="temporaryResponses"></p>
                <p id="closeResponse"></p>
                <p id="oneResponse"></p>
                <p id="allResponse"></p>
                <p th:text="${portNameResponse}"></p>
                <p style="color: #333333;font-size: 20px" th:text="${portNameResponse}"></p>
                <p style="color: #333333;font-size: 20px" th:text="${temporaryResponses}"></p>
                <h3 style="color: #333333;font-size: 20px" th:text="${closeResponse}"></h3>
                <p style="color: #333333;font-size: 20px" th:text="${oneResponse}"></p>
                <p style="color: #333333;font-size: 20px" th:text="${allResponse}"></p>
            </div>
        </div>
    </div>


    <div class="main3">
        <h3>响应数据</h3>
        <ul>
            <li th:each="response, stat : ${allResponse}" th:text="${stat.index + 1} + '. ' + ${allResponse}">Response</li>
        </ul>
    </div>


</div>

</body>
</html>
